<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UNTITLED</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js"></script>
</head>
<body>
	<div class="container">
		<section id="buttonGroups">
			<div class="page-header">
				<h1>
					ButtonGroups <small>Join buttons for more toolbar-like
						functionality</small>
				</h1>
			</div>
			<h3>Default example</h3>
			<div class="btn-group" style="margin: 9px 0;">
				<a class="btn" href="#">Left</a> <a class="btn" href="#">Middle</a>
				<a class="btn" href="#">Right</a>
			</div>
			<h3>Toolbar example</h3>
			<div class="btn-toolbar">
				<div class="btn-group">
					<a class="btn" href="#">1</a> <a class="btn" href="#">2</a> <a
						class="btn" href="#">3</a> <a class="btn" href="#">4</a>
				</div>
				<div class="btn-group">
					<a class="btn" href="#">5</a> <a class="btn" href="#">6</a> <a
						class="btn" href="#">7</a>
				</div>
				<div class="btn-group">
					<a class="btn" href="#">8</a>
				</div>
			</div>


		</section>


		<section id="buttonDropdowns">
			<div class="page-header">
				<h1>
					Button Dropdowns <small>Contextual dropdown menus built on
						button groups</small>
				</h1>
			</div>
			<div class="btn-toolbar" style="margin-top: 18px;">
				<div class="btn-group">
					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
						href="#">Action <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
						href="#">Danger <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<a class="btn btn-success dropdown-toggle" data-toggle="dropdown"
						href="#">Success <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group">
					<a class="btn btn-info dropdown-toggle" data-toggle="dropdown"
						href="#">Info <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
			</div>
		</section>

		<section id="navs"
			style="margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 168px">
			<div class="page-header">
				<h1>
					Nav, tabs, and pills <small>Highly customizable list-style
						navigation</small>
				</h1>
			</div>
			<h2>
				Lightweight defaults <small>Same markup, different classes</small>
			</h2>
			<h3>Basic tabs</h3>
			<div>
				<ul class="nav nav-tabs">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Messages</a></li>
				</ul>
			</div>
			<h3>Basic pills</h3>
			<div>
				<ul class="nav nav-pills">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Messages</a></li>
				</ul>
			</div>

			<h2>
				Stackable <small>Make tabs or pills vertical</small>
			</h2>
			<h3>Stacked tabs</h3>
			<ul class="nav nav-tabs nav-stacked">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Profile</a></li>
				<li><a href="#">Messages</a></li>
			</ul>


			<h2>
				Nav lists <small>Build simple stacked navs, great for
					sidebars</small>
			</h2>

			<h3>Example nav list</h3>
			<div class="well" style="padding: 8px 0;">
				<ul class="nav nav-list">
					<li class="nav-header">List header</li>
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Library</a></li>
					<li><a href="#">Applications</a></li>
					<li class="nav-header">Another list header</li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Settings</a></li>
					<li><a href="#">Help</a></li>
				</ul>
			</div>

			<h3>Example with icons</h3>

			<div class="well" style="padding: 8px 0;">
				<ul class="nav nav-list">
					<li class="nav-header">List header</li>
					<li class="active"><a href="#"><i
							class="icon-white icon-home"></i> Home</a></li>
					<li><a href="#"><i class="icon-book"></i> Library</a></li>
					<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
					<li class="nav-header">Another list header</li>
					<li><a href="#"><i class="icon-user"></i> Profile</a></li>
					<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
					<li><a href="#"><i class="icon-flag"></i> Help</a></li>
				</ul>
			</div>
		</section>


		<section id="navbar">
			<div class="page-header">
				<h1>Navbar</h1>
			</div>
			<h2>Static navbar example</h2>
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container" style="width: auto;">
						<a class="btn btn-navbar" data-toggle="collapse"
							data-target=".nav-collapse"> <span class="icon-bar"></span> <span
							class="icon-bar"></span> <span class="icon-bar"></span>
						</a> <a class="brand" href="#">Project name</a>
						<div class="nav-collapse">
							<ul class="nav">
								<li class="active"><a href="#">Home</a></li>
								<li><a href="#">Link</a></li>
								<li><a href="#">Link</a></li>
								<li><a href="#">Link</a></li>
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown">Dropdown <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><a href="#">Action</a></li>
										<li><a href="#">Another action</a></li>
										<li><a href="#">Something else here</a></li>
										<li class="divider"></li>
										<li class="nav-header">Nav header</li>
										<li><a href="#">Separated link</a></li>
										<li><a href="#">One more separated link</a></li>
									</ul></li>
							</ul>
							<form class="navbar-search pull-left" action="">
								<input type="text" class="search-query span2"
									placeholder="Search">
							</form>
							<ul class="nav pull-right">
								<li><a href="#">Link</a></li>
								<li class="divider-vertical"></li>
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown">Dropdown <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><a href="#">Action</a></li>
										<li><a href="#">Another action</a></li>
										<li><a href="#">Something else here</a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link</a></li>
									</ul></li>
							</ul>
						</div>
						<!-- /.nav-collapse -->
					</div>
				</div>
				<!-- /navbar-inner -->
			</div>
		</section>
		<section id="breadcrumbs">
			<div class="page-header">
				<h1>
					Breadcrumbs <small></small>
				</h1>
			</div>
			<h3>Examples</h3>
			<ul class="breadcrumb">
				<li class="active">Home</li>
			</ul>
			<ul class="breadcrumb">
				<li><a href="#">Home</a> <span class="divider">/</span></li>
				<li class="active">Library</li>
			</ul>
			<ul class="breadcrumb">
				<li><a href="#">Home</a> <span class="divider">/</span></li>
				<li><a href="#">Library</a> <span class="divider">/</span></li>
				<li class="active">Data</li>
			</ul>
		</section>

		<section id="pagination">
			<h2>Multicon-page pagination</h2>
			<div class="pagination">
				<ul>
					<li class="disabled"><a href="#">«</a></li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">»</a></li>
				</ul>
			</div>

			<div class="pagination">
				<ul>
					<li><a href="#">«</a></li>
					<li><a href="#">10</a></li>
					<li class="active"><a href="#">11</a></li>
					<li><a href="#">12</a></li>
					<li><a href="#">»</a></li>
				</ul>
			</div>

			<div class="pagination">
				<ul>
					<li><a href="#">←</a></li>
					<li class="active"><a href="#">10</a></li>
					<li class="disabled"><a href="#">...</a></li>
					<li><a href="#">20</a></li>
					<li><a href="#">→</a></li>
				</ul>
			</div>
			<div class="pagination pagination-centered">
				<ul>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
				</ul>
			</div>
			<h2>
				Pager <small>For quick previous and next links</small>
			</h2>
			<ul class="pager">
				<li><a href="#">Previous</a></li>
				<li><a href="#">Next</a></li>
			</ul>
			<ul class="pager">
				<li class="previous"><a href="#">← Older</a></li>
				<li class="next"><a href="#">Newer →</a></li>
			</ul>
		</section>
		<section id="labels">
			<div class="page-header">
				<h1>
					Inline labels <small>Label and annotate text</small>
				</h1>
			</div>
			<ul>
				<li><span class="label">Default</span></li>
				<li><span class="label label-success">Success</span></li>
				<li><span class="label label-warning">Warning</span></li>
				<li><span class="label label-important">Important</span></li>
				<li><span class="label label-info">Info</span></li>
			</ul>
		</section>
		<section id="typography">
			<h2>Hero unit</h2>
			<div class="hero-unit">
				<h1>Hello, world!</h1>
				<p>This is a simple hero unit, a simple jumbotron-style
					component for calling extra attention to featured content or
					information.</p>
				<p>
					<a class="btn btn-primary btn-large">Learn more</a>
				</p>
			</div>
		</section>
		<section id="thumbnails">
			<div class="page-header">
				<h1>
					Thumbnails <small>Grids of images, videos, text, and more</small>
				</h1>
			</div>
			<ul class="thumbnails">
				<li class="span3"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/260x180" alt="">
				</a></li>
				<li class="span3"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/260x180" alt="">
				</a></li>
				<li class="span3"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/260x180" alt="">
				</a></li>
				<li class="span3"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/260x180" alt="">
				</a></li>
			</ul>
			<ul class="thumbnails">
				<li class="span4"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/360x268" alt="">
				</a></li>
				<li class="span2"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/160x120" alt="">
				</a></li>
				<li class="span2"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/160x120" alt="">
				</a></li>
				<li class="span2"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/160x120" alt="">
				</a></li>
				<li class="span2"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/160x120" alt="">
				</a></li>
				<li class="span2"><a href="#" class="thumbnail"> <img
						src="http://placehold.it/160x120" alt="">
				</a></li>
			</ul>
		</section>
		<section id="alerts" style="margin: 0">
			<div class="page-header">
				<h1>
					Alerts <small>Styles for success, warning, and error
						messages</small>
				</h1>
			</div>

			<div class="alert">
				<a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong>
				Best check yo self, you're not looking too good.
			</div>
			<h3>Error or danger</h3>
			<div class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a> <strong>Oh
					snap!</strong> Change a few things up and try submitting again.
			</div>
			<h3>Success</h3>
			<div class="alert alert-success">
				<a class="close" data-dismiss="alert">×</a> <strong>Well
					done!</strong> You successfully read this important alert message.
			</div>
			<h3>Information</h3>

			<div class="alert alert-info">
				<a class="close" data-dismiss="alert">×</a> <strong>Heads
					up!</strong> This alert needs your attention, but it's not super important.
			</div>
		</section>

		<section id="progress">
			<div class="page-header">
				<h1>
					Progress bars <small>For loading, redirecting, or action
						status</small>
				</h1>
			</div>
			<h3>Basic</h3>
			<div class="progress">
				<div class="bar" style="width: 60%;"></div>
			</div>
			<h3>Striped</h3>
			<div class="progress progress-info progress-striped">
				<div class="bar" style="width: 20%;"></div>
			</div>
			
			<h3>Animated</h3>
			<div class="progress progress-danger progress-striped active">
        <div class="bar" style="width: 45%"></div>
      </div>
		</section>
	</div>
</body>
</html>